<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.batchCode" placeholder="波次号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="波次状态"
                style="width: 100%"
                v-model="queryParams.batchType"
            >
              <el-option label="自动创建" value="0"></el-option>
              <el-option label="手工创建" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.batchPloyName" placeholder="波次策略" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"

                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>
    <div>
      <el-button type="primary" @click="clickPick">打印拣货单</el-button>
      <el-button type="primary" @click="SelectAsDefaultPrinter">选择打印机</el-button>
    </div>
    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :radio-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="radio" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="batchCode" title="波次号">
        <template #default="{row}">
          <el-link type="primary" @click="chickDetail(row)">{{ row.batchCode }}</el-link>
        </template>
      </vxe-column>
      <vxe-column field="batchType" title="波次状态">
        <template #default="{row}">
          {{ row.batchType == 0 ? '自动创建' : '手工创建' }}
        </template>
      </vxe-column>
      <vxe-column field="printNum" title="打印拣货单次数"></vxe-column>
      <vxe-column field="batchPloyName" title="波次策略"></vxe-column>
      <vxe-column field="orderNum" title="订单数量"></vxe-column>
      <vxe-column field="skuType" title="商品品类"></vxe-column>
      <vxe-column field="skuNum" title="拣货数量"></vxe-column>
      <vxe-column field="createTime" title="生成时间"></vxe-column>

      <vxe-column fixed="right" width="200" title="操作">
        <template #default="{row}">
          <el-button type="text" style="color:green" @click="chickDetail(row)">查看</el-button>
        </template>
      </vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <PickGoodsDialog v-if="isShowDialog" :isShowDialog="isShowDialog" :detailList="detailList"
                     @cancel="isShowDialog=false"></PickGoodsDialog>

    <!--    打印区域-->
    <div style="position: absolute;top: 999px">

      <div id="printWrap" v-if="isShowPrint">
        <template v-for="(item,index) in printTableData" :key="index">
          <div class="printDiv" :id="'printDiv'+item.outId">
            <div style="text-align: right;">{{item.batchCode}} 拣货序号:{{item.pickSort}}</div>
            <h1 style="text-align: center;">拣货单</h1>
            <div style="width: 100%;text-align: center">
              <svg :id="'barcode'+item.outId"></svg>
            </div>
            <div style="padding: 10px;">
              <div style="display: flex;margin-top: 10px;">
                <div style="width: 30%;">订单号:</div>
                <div style="width: 70%;text-align: right">{{item.outCode}}</div>
              </div>
              <div style="display: flex;margin-top: 10px;">
                <div style="width: 30%;">拣货总量:</div>
                <div style="width: 70%;text-align: right">{{item.outNum}}件</div>
              </div>
              <div style="display: flex;margin-top: 10px;">
                <div style="width: 30%;">商品品种:</div>
                <div style="width: 70%;text-align: right">{{item.breedNum}}种</div>
              </div>

              <div style="font-size: 8pt;">
                <div style="display: flex;text-align: center;margin-top: 10px;">
                  <div style="flex: 1"> 商品名称</div>
                  <div style="flex: 1"> 拣货数量</div>
                  <div style="flex: 1"> 拣货库位</div>
                </div>
                <template v-for="(sku,skuIndex) in item.skuList" :key="skuIndex">
                  <div style="display: flex;text-align: center;margin-top: 10px;">
                    <div style="flex: 1"> {{sku.skuName}}</div>
                    <div style="flex: 1">
                      <template v-for="(pick,pickIndex) in sku.pickDetailList" :key="pickIndex">
                        <div>  {{pick.skuNum}}件</div>
                      </template>
                    </div>
                    <div style="flex: 1">
                      <template v-for="(pick,pickIndex) in sku.pickDetailList" :key="pickIndex">
                        <div>{{pick.locationCode}}</div>
                      </template>
                    </div>
                  </div>
                </template>
              </div>

              <div style="margin-top: 10px;">拣货人:刘备备</div>
              <div style="margin-top: 10px;">打印时间:{{printTime}}</div>
            </div>

          </div>
        </template>

      </div>
    </div>

  </div>

</template>

<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import PickGoodsDialog from "@/views/outStorage/wavePick/pickGoodsDialog.vue";
import {getBatchDetail, getBatchList, updateBatchPrintNum} from "@/api/scApi";
import {flattenData, getNowDate} from "@/utils/shuangcheng";
import JsBarcode from "jsbarcode";
import {getLodop} from "@/assets/LodopFuncs";

const {proxy} = getCurrentInstance()
let timeData = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
let total = ref(0)

let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 330;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 330;
}
let loading = ref(false)
let tableList = ref([])

function getList() {
  loading.value = true
  queryParams.value.startTime = timeData.value[0]
  queryParams.value.endTime = timeData.value[1]
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getBatchList(params).then(res => {
    loading.value = false
    tableList.value = flattenData(res.data)
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}

let isShowDialog = ref(false)
let detailList = ref([])

function clickPick() {
  let rowData = proxy.$refs.tableRef.getRadioRecord()
  if (rowData) {
    getPrintData(rowData.batchId)
  } else {
    proxy.$modal.msgWarning("请先选择一行数据!")
  }
}

function chickDetail(row) {
  getDetailList(row.batchId)
}

function getDetailList(id) {
  getBatchDetail(id).then(res => {
    if (res.code === 200) {
      detailList.value = res.data
      isShowDialog.value = true
    }
  })
}

const resetQuery = () => {
  timeData.value = []
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};
let LODOP;
onMounted(() => {
  getList()
  setTimeout(()=>{
    LODOP=getLodop();
  },500)
})

let isShowPrint = ref(false)
let printTime=ref("")
let printTableData=ref([ ])  //打印面单数据
//打印

function getPrintData(id) {
  isShowPrint.value=true
  getBatchDetail(id).then(res => {
    if (res.code === 200) {
      printTableData.value =res.data
      printTime.value=getNowDate()
      nextTick(() => {
        printTableData.value.map(item=>{
          JsBarcode("#barcode"+item.outId, item.outCode, {
            width: 1.5,
            height: 80,
            fontSize: '18pt',
            fontOptions: 'bold',
            displayValue: true //是否在条形码下方显示文字
          });
        })

        if (LODOP) {
          for (let i = 0; i < printTableData.value.length; i++) {
            let obj=printTableData.value[i]
            let strFormHtml=document.querySelector("#printDiv"+obj.outId).innerHTML
            LODOP.PRINT_INIT('')//初始化
            LODOP.SET_PRINT_PAGESIZE(3,800,100)//设置高度自适应
            LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //设置打印内容
            LODOP.PRINT()
          }
          updatePtintNum(id)
        }
        setTimeout(()=>{
          isShowPrint.value=false
        },500)

      })
    }
  })
}

//更新打印拣货单次数
function updatePtintNum(id){
  updateBatchPrintNum({batchId:id}).then(res=>{
    getList()
  })
}
//指定打印机
function SelectAsDefaultPrinter() {
  if (LODOP.CVERSION) {
    LODOP.On_Return=function(TaskID,Value){  }
    LODOP.SELECT_PRINTER()
    return;
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
//表格合并
:deep(.flexTd) {
  padding: 0 !important;
  .vxe-cell {
    padding: 0 !important;
  }
}

.printDiv {
  margin-top: 200px;
  width: 100%;
  border: 1px solid black;
  font-weight: bold;
  :deep(.vxe-header--column){
    padding: 0;
  }
  :deep(.vxe-body--column){
    padding: 0;
    line-height:12px;
  }
}

.flexSub {
  height: 20px;
  line-height: 20px;
}

.flexSub:not(:last-child) {
  border-bottom: 1px solid #e8eaec;
}

</style>